<template>
  <div class="login v2">
    <div class="wrapper">
      <div class="dialog dialog-shadow" style="display: block; margin-top: -362px">
        <div class="title">
          <h4>使用账号 登录官网</h4>
        </div>
        
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="75px">
          <el-form-item prop="username">
            <el-input placeholder="用户名" type="text" v-model="ruleForm.username" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input placeholder="密码" type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label-width="150px">
            <el-button type="primary" style="margin-left: -75px; width: 100%; height: 48px; font-size: 18px;" @click="submitForm()" :disabled="Login">登录</el-button>
            <el-button style="margin-left: -75px;; margin-top: 10px; width: 100%; height: 48px; font-size: 18px;" @click="resetForm()">返回</el-button>
          </el-form-item>
        </el-form>
        <div class="content">
          <a href="javascript:;" class="register" @click="toRegister">没有账号？</a>
          <a style="padding: 1px 0 0 10px" @click="open('找回密码', '密码丢失后无法找回，请在努力想想吧！')">忘记密码 ?</a>
        </div>
        <div class="border"></div>
        <div class="footer">
          <div class="other">其它账号登录：</div>
          <a>
            <img @click="open('待开发', '此功能开发中...')" style="height: 15px; margin-top: 22px" src="../../assets/img/other-login.png" />
          </a>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
import { Login } from '../../api/user'
import { getCartInfo } from '../../api/cart'

export default {
  name: 'Login',
  data() {
    var validateInput = (rule, value, callback) => {
      if (!this.checkSpecialKey(value)) {
        callback(new Error("不能含有特殊字符"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        username: null,
        password: null
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 2, max: 16, message: '长度在 2 到 16 个字符', trigger: 'blur' },
          { validator: validateInput, trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' },
          { validator: validateInput, trigger: 'blur' },
        ]
      },
      // 手机验证码
      code: null,
      passwordType: 'password',
    }
  },
  computed: {
    ...mapState(['userInfo']),
    Login() {
      if(this.ruleForm.username && this.ruleForm.password) {
        return false
      }else {
        return true
      }
    }
  },
  created() {
    
  },
  methods: {
    ...mapMutations(['ISLOGIN', 'CARTINFO']),
    async getCartInfo() {
      const { data: res } = await getCartInfo()

      if(res.code !== 0 ) {
        return this.$notify.error({
          title: '警告',
          message: '获取购物车信息失败'
        })
      }
      this.CARTINFO(res.result.list)
    },

    submitForm() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (!valid) {
          return this.$message.error('请输入正确的账号或密码')
        }

        const { data: res} = await Login(this.ruleForm)
        //console.log(res)
        if(res.code === 10007) {
          return this.$notify.error({
            title: '警告',
            message: '该账户已被封禁'
          })
        }else if(res.code === 10004) {
          return this.$notify.error({
            title: '警告',
            message: '该账户不存在'
          })
        }else if(res.code !== 0){
          return this.$notify.error({
            title: '警告',
            message: '用户名或密码输入错误'
          })
        }

        window.sessionStorage.clear()
        this.ISLOGIN(res.result.userInfo)
        window.sessionStorage.setItem('token', res.result.token)
        window.sessionStorage.setItem('userInfo', JSON.stringify(res.result.userInfo))

        // 获取对应用户购物车数据
        await this.getCartInfo()

        this.$router.push('/')
      });
    },
    resetForm() {
      this.$refs.ruleForm.resetFields()
      return this.$router.push('/')
    },
    toRegister() {
      return this.$router.push('/register')
    },
    open(t, m) {
      this.$notify.info({
        title: t,
        message: m,
      })
    },
    
    checkSpecialKey(str) {
      let specialKey = "[`~!#$^&*()=|{}':;'\\[\\].<>/?~！#￥……&*（）——|{}【】‘；：”“'。，、？]‘'";
      for (let i = 0; i < str.length; i++) {
        if (specialKey.indexOf(str.substr(i, 1)) != -1) {
          return false;
        }
      }
      return true;
    }
  }
}
</script>

<style lang="scss" scoped>
.el-input {
  width: 300px;
}
.wrapper {
  background: url(../../assets/img/bg_9b9dcb65ff.png) repeat;
  min-height: calc(100vh);
}

.v2 .dialog {
  width: 450px;
  border: 1px solid #dadada;
  border-radius: 10px;
  top: 50%;
  left: 50%;
  background-color: #FFFFFF;
  margin-left: -225px;
  position: absolute;
  .title {
    background: linear-gradient(#fff, #f5f5f5);
    height: auto;
    overflow: visible;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    position: relative;
    background: url(../../assets/img/logo.png) no-repeat;
    border-radius: 50%;
    background-size: 130px;
    background-position: top center;
    height: 160px;
    margin: 23px 0 50px;
    padding: 75px 0 0;
    box-shadow: none;
    h4 {
      position: absolute;
      bottom: 0;
      width: 100%;
      text-align: center;
      line-height: 1em;
      height: auto;
      color: #333;
      font-weight: 400;
      font-size: 20px;
    }
  }
}

.dialog-shadow,
.v2 .bbs .dialog-shadow,
.v2 .dialog-shadow {
  -webkit-box-shadow: 0 9px 30px -6px rgba(0, 0, 0, 0.2), 0 18px 20px -10px rgba(0, 0, 0, 0.04), 0 18px 20px -10px rgba(0, 0, 0, 0.04), 0 10px 20px -10px rgba(0, 0, 0, 0.04);
  -moz-box-shadow: 0 9px 30px -6px rgba(0, 0, 0, 0.2), 0 18px 20px -10px rgba(0, 0, 0, 0.04), 0 18px 20px -10px rgba(0, 0, 0, 0.04), 0 10px 20px -10px rgba(0, 0, 0, 0.04);
  box-shadow: 0 9px 30px -6px rgba(0, 0, 0, 0.2), 0 18px 20px -10px rgba(0, 0, 0, 0.04), 0 18px 20px -10px rgba(0, 0, 0, 0.04), 0 10px 20px -10px rgba(0, 0, 0, 0.04);
}

.content {
  text-align: right;
  margin-right: 75px;
  margin-top: -10px;
  margin-bottom: 10px;
}

.register {
  padding: 1px 10px 0;
  border-right: 1px solid #ccc;
}

.border {
  width: 300px;
  margin-top: 10px;
  margin-left: 75px;
  border-bottom: 1px solid #ccc;
}
.other {
  margin: 20px 5px 0 75px;
  width: auto;
  color: #bbb;
  font-size: 12px;
  cursor: default;
  color: #999;
}
.footer {
  display: flex;
  flex-direction: row;
}
</style>
